<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>520快乐</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: {
                            primary: '#FF4B91',
                            secondary: '#FFB6C1',
                            accent: '#FF85A2',
                            light: '#FFF0F5',
                            dark: '#C71585'
                        }
                    },
                    fontFamily: {
                        love: ['Dancing Script', 'cursive', 'system-ui']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-float-delay-1 {
                animation: float 6s ease-in-out 1s infinite;
            }
            .animate-float-delay-2 {
                animation: float 6s ease-in-out 2s infinite;
            }
            .animate-float-delay-3 {
                animation: float 6s ease-in-out 3s infinite;
            }
            .animate-heartbeat {
                animation: heartbeat 1.5s ease-in-out infinite;
            }
            .bg-gradient-love {
                background: linear-gradient(135deg, #FF4B91 0%, #FF85A2 100%);
            }
            .content-auto {
                content-visibility: auto;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
        }
        
        /* 移动端优化 */
        @media (max-width: 480px) {
            .card-container {
                margin: 0 10px;
            }
            
            .text-[clamp(1.5rem,3vw,2.2rem)] {
                font-size: clamp(1.3rem, 4vw, 1.8rem);
            }
            
            .text-[clamp(1.1rem,2vw,1.2rem)] {
                font-size: clamp(1rem, 3vw, 1.1rem);
            }
            
            .text-[clamp(1.2rem,3vw,1.8rem)] {
                font-size: clamp(1.1rem, 3vw, 1.5rem);
            }
            
            .text-[clamp(2.5rem,5vw,4rem)] {
                font-size: clamp(2rem, 6vw, 3rem);
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-love-light min-h-screen flex items-center justify-center overflow-hidden">
    <!-- 背景爱心装饰 -->
    <div class="fixed inset-0 pointer-events-none z-0">
        <div class="absolute top-10 left-10 text-love-accent text-5xl opacity-20 animate-float"><i class="fa-solid fa-heart"></i></div>
        <div class="absolute top-1/3 right-1/4 text-love-primary text-6xl opacity-10 animate-float-delay-1"><i class="fa-solid fa-heart"></i></div>
        <div class="absolute bottom-1/4 left-1/3 text-love-dark text-4xl opacity-15 animate-float-delay-2"><i class="fa-solid fa-heart"></i></div>
        <div class="absolute bottom-20 right-20 text-love-secondary text-5xl opacity-20 animate-float-delay-3"><i class="fa-solid fa-heart"></i></div>
        <div class="absolute top-1/2 left-1/4 text-love-accent text-3xl opacity-10 animate-float-delay-1"><i class="fa-solid fa-heart"></i></div>
        <div class="absolute bottom-1/3 right-1/3 text-love-primary text-4xl opacity-15 animate-float"><i class="fa-solid fa-heart"></i></div>
    </div>

    <!-- 卡片容器 -->
    <div class="relative z-10 w-full max-w-md mx-4 transition-all duration-500 hover:scale-[1.02] card-container">
        <!-- 卡片 -->
        <div id="card" class="bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-700 ease-in-out">
            <!-- 卡片封面 -->
            <div id="card-cover" class="relative h-64 bg-gradient-love flex items-center justify-center cursor-pointer overflow-hidden">
                <div class="absolute inset-0 bg-black/10"></div>
                <h1 class="text-white font-love text-[clamp(2.5rem,5vw,4rem)] font-bold text-shadow-lg z-10">520 快乐</h1>
                <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-white to-transparent"></div>
            </div>
            
            <!-- 卡片内页 -->
            <div id="card-content" class="p-6 transform transition-all duration-700 ease-in-out origin-top">
                <div class="text-center mb-6">
                    <h2 class="font-love text-love-primary text-[clamp(1.5rem,3vw,2.2rem)] mb-2">星眸映月念云深</h2>
                    <div class="inline-block mb-4">
                        <i class="fa-solid fa-heart text-love-primary animate-heartbeat"></i>
                    </div>
                </div>
                
                <p class="text-gray-700 text-[clamp(1.1rem,2vw,1.2rem)] leading-relaxed mb-8 text-center">
                    叶舞清风醉意绵，<br>
                    周珊绕指诉心弦。<br>
                    云笺写尽相思语，<br>
                    我慕卿颜似月仙。<br>
                    爱意潺潺流不尽，<br>
                    你如星子映眸前。
                </p>
                
                <div class="text-center mt-8">
                    <p class="font-love text-love-primary text-[clamp(1.2rem,3vw,1.8rem)]">爱你的千本</p>
                    <div class="mt-4 text-love-accent text-3xl">
                        <i class="fa-solid fa-heart animate-heartbeat"></i>
                    </div>
                </div>
                
                <div class="mt-8 flex justify-center">
                    <button id="close-card" class="px-6 py-3 bg-love-primary text-white rounded-full shadow-lg hover:bg-love-dark transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-love-primary focus:ring-opacity-50 text-lg">
                        关闭贺卡
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 打开按钮 -->
        <div id="open-button" class="absolute inset-0 flex items-center justify-center bg-white/90 rounded-2xl shadow-2xl z-20 cursor-pointer transition-opacity duration-500">
            <div class="text-center">
                <div class="text-love-primary text-5xl mb-4 animate-heartbeat">
                    <i class="fa-solid fa-heart"></i>
                </div>
                <h2 class="font-love text-love-primary text-[clamp(1.5rem,3vw,2.5rem)] mb-4">点击开启爱的寄语</h2>
                <button class="px-8 py-4 bg-love-primary text-white rounded-full shadow-lg hover:bg-love-dark transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-love-primary focus:ring-opacity-50 text-lg">
                    打开贺卡
                </button>
            </div>
        </div>
    </div>

    <script>
        // 卡片交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const card = document.getElementById('card');
            const cardCover = document.getElementById('card-cover');
            const cardContent = document.getElementById('card-content');
            const openButton = document.getElementById('open-button');
            const closeCard = document.getElementById('close-card');
            
            // 初始状态
            cardContent.style.transform = 'rotateX(-180deg)';
            cardContent.style.opacity = '0';
            
            // 移动端触摸优化
            let touchStartX = 0;
            let touchStartY = 0;
            
            cardCover.addEventListener('touchstart', function(e) {
                touchStartX = e.touches[0].clientX;
                touchStartY = e.touches[0].clientY;
            }, false);
            
            cardCover.addEventListener('touchend', function(e) {
                const touchEndX = e.changedTouches[0].clientX;
                const touchEndY = e.changedTouches[0].clientY;
                
                // 如果触摸移动距离很小，认为是点击
                if (Math.abs(touchEndX - touchStartX) < 20 && Math.abs(touchEndY - touchStartY) < 20) {
                    openCard();
                }
            }, false);
            
            // 打开贺卡
            function openCard() {
                openButton.style.opacity = '0';
                setTimeout(() => {
                    openButton.style.display = 'none';
                    cardCover.style.transform = 'rotateX(-180deg)';
                    cardCover.style.opacity = '0';
                    cardCover.style.pointerEvents = 'none';
                    
                    setTimeout(() => {
                        cardContent.style.transform = 'rotateX(0deg)';
                        cardContent.style.opacity = '1';
                    }, 500);
                }, 500);
            }
            
            // 关闭贺卡
            function resetCard() {
                cardContent.style.transform = 'rotateX(-180deg)';
                cardContent.style.opacity = '0';
                
                setTimeout(() => {
                    cardCover.style.transform = 'rotateX(0deg)';
                    cardCover.style.opacity = '1';
                    cardCover.style.pointerEvents = 'auto';
                    
                    setTimeout(() => {
                        openButton.style.display = 'flex';
                        setTimeout(() => {
                            openButton.style.opacity = '1';
                        }, 10);
                    }, 500);
                }, 500);
            }
            
            // 绑定事件
            cardCover.addEventListener('click', openCard);
            openButton.addEventListener('click', openCard);
            closeCard.addEventListener('click', resetCard);
        });
    </script>
</body>
</html>
    